<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="favicon.ico" />
    <title>HTML5 History Mode</title>
  </head>
  <body>
    <script src="https://unpkg.com/vue@2.7/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script>
    <link type="text/css" rel="stylesheet" href="style.css" />
    <div id="app">
      <router-link to="/">To Home</router-link>
      <router-link to="/user">To User</router-link>
      <router-link to="/not">To Not Found</router-link>
      <router-view></router-view>
    </div>
    <script type="text/javascript">
      const template = `
                  <div>
                    name:{{$route.name}}<br />
                    path:{{$route.path}}
                    <div>query:{{$route.query}}</div>
                    <div>params:{{$route.params}}</div>
                  </div>`;
      const Home = {
        template,
      };
      const User = {
        template,
      };
      const NotFound = {
        template,
      };
      const routes = [
        {
          path: "/",
          component: Home,
        },
        {
          path: "/user",
          name: "user",
          component: User,
        },
        {
          path: "*",
          component: NotFound,
        },
      ];
      const router = new VueRouter({
        mode: "history",
        routes,
      });
      const app = new Vue({
        router,
        el: "#app",
      });
    </script>
  </body>
</html>
